<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编程导航评论管理</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        :root {
            --primary-color: #4285f4;
            --secondary-color: #f1f3f4;
            --text-color: #202124;
            --border-radius: 10px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --hover-color: #3367d6;
            --transition-duration: 0.3s;
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            font-family: var(--font-family);
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            color: var(--text-color);
        }

        .dashboard-container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        .navbar {
            background-color: var(--primary-color);
            color: white;
            padding: 20px;
            border-radius: var(--border-radius);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: var(--box-shadow);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: white;
            object-fit: cover;
        }

        .search-bar {
            background-color: white;
            padding: 15px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            justify-content: flex-start;
        }

        .search-bar input,
        .search-bar button {
            padding: 12px;
            border-radius: var(--border-radius);
            font-size: 14px;
            transition: all var(--transition-duration);
        }

        .search-bar input {
            width: 200px;
            border: 1px solid #ddd;
        }

        .search-bar button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color var(--transition-duration);
        }

        .search-bar button:hover {
            background-color: var(--hover-color);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        th, td {
            padding: 18px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            font-size: 15px;
        }

        th {
            background-color: var(--secondary-color);
            font-weight: bold;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        table button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: background-color var(--transition-duration);
        }

        table button:hover {
            background-color: var(--hover-color);
        }

        .pagination {
            background-color: white;
            padding: 15px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-top: 20px;
            display: flex;
            gap: 15px;
            justify-content: flex-start;
            align-items: center;
        }

        .pagination select,
        .pagination button {
            padding: 10px 15px;
            border-radius: var(--border-radius);
            font-size: 14px;
            border: 1px solid #ddd;
        }

        .pagination button {
            background-color: var(--primary-color);
            color: white;
            cursor: pointer;
            transition: background-color var(--transition-duration);
        }

        .pagination button:hover {
            background-color: var(--hover-color);
        }

        .pagination select {
            width: 80px;
        }

        .pagination button:disabled {
            background-color: #ddd;
            cursor: not-allowed;
        }

        .page-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }

        .page-links button {
            padding: 12px 24px;
            font-size: 16px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: background-color var(--transition-duration);
        }

        .page-links button:hover {
            background-color: var(--hover-color);
        }
    </style>
    <script src="./js/vue.js"></script>

    <script src="./js/axios.min.js"></script>
</head>
<body>
<div class="dashboard-container" id="app">
    <div class="navbar">
        <h2>编程导航用户管理</h2>
        <div class="user-info">
            <img src="" alt="头像" class="user-avatar" id="userAvatar">
            <span id="usernameDisplay"></span>
        </div>
    </div>


    <div class="search-bar">
        <input v-model="searchData.nickname" type="text" id="nickname" placeholder="昵称">
        <!--        <input v-model="searchData.status" type="text" id="status" placeholder="状态">-->
        <input v-model="searchData.gender" type="text" id="gender" placeholder="性别">
        <input v-model="searchData.graduation_year" type="text" id="graduation_year" placeholder="毕业年份">
        <button type="button" id="searchBtn" @click="getUserBySearch(1)">搜索</button>
        <button type="button" id="addEmployeeBtn" @click="goToAddUser">新增员工</button>
        <button type="button" id="deleteSelected" @click="deleteUserByIds">批量删除</button>
    </div>

    <table>
        <thead>
        <tr>
            <th class="checkbox-cell"><input type="checkbox" @click="selectAll" v-model="allSelected"></th>
            <th>用户编号</th>
            <th>昵称</th>
            <th>性别</th>
            <th>联系方式</th>
            <th>生日</th>
            <th>目标职业</th>
            <th>毕业年份</th>
            <th>用户密码</th>
            <th>状态</th>
            <th>错误计数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="employeeTableBody">
        <tr v-for="item in userList">
            <td class="checkbox-cell"><input type="checkbox" v-model="selectedIds" :value="item.user_id"></td>
            <td>{{item.user_id}}</td>
            <td>{{item.nickname}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.contact}}</td>
            <td>{{item.birthday}}</td>
            <td>{{item.career_direction}}</td>
            <td>{{item.graduation_year}}</td>
            <td>{{item.user_password}}</td>
            <td>{{item.status}}</td>
            <td>{{item.error_count}}</td>
            <td>
                <button @click="gotoUpdate(item.user_id)">编辑</button>
                <button @click="deleteById(item.user_id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="pagination" id="pagination">
        分页大小：
        <select name="ps" id="ps" v-model="searchData.pageSize">
            <option value="2">2</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>
        <button @click="getUserBySearch(1)">首页</button>
        <button @click="getUserBySearch(searchData.pageNo-1)">上一页</button>
        <button v-for="item in searchData.sizes" @click="getUserBySearch(item)">{{item}}</button>
        <button @click="getUserBySearch((searchData.pageNo+1) > searchData.sizes.length ? searchData.sizes.length : (searchData.pageNo+1))">下一页</button>
        <button @click="getUserBySearch(searchData.sizes.length)">尾页</button>
    </div>
    <div class="page-links">
        <button onclick="window.location.href='main.html'">查看用户页面</button>
        <button onclick="window.location.href='comment.html'">查看评论页面</button>
    </div>
    <br>

</div>

<script src="./js/getUser.js"></script>
<script>
    window.onload = function () {
        let itemStr = localStorage.getItem("account");
        let parse = JSON.parse(itemStr);
        let username = parse["username"];
        let img_url = parse["img_url"];
        document.getElementById("userAvatar").src = img_url;
        document.getElementById("usernameDisplay").innerHTML = username;
    }
</script>